<template>
	<view class="container">

		<view class="order-info">
			
		<!-- 	<view class="order-item">
				<view class="left">
					<view class="name f30 c333">开单日期：</view>

					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="dateChange">
						<view class="uni-input f30 c666 mfl25">{{date}}</view>
					</picker>
				</view>
				<view class="arrow">
					<image src="../../static/images/arrow_right.png" mode="aspectFit"></image>
				</view>
			</view> -->

			<view class="order-item" @click="goChangeUser">
				<view class="left">
					<view class="name f30 c333">客户姓名：</view>
					<view class="text f30 c666 mfl25">{{ add.name }}</view>
				</view>
				<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
			</view>
		</view>

		<view class="oweBox tRight">
			<view class="text f30">
				<image src="../../static/images/icon_owe.png" mode="aspectFit"></image>
				¥{{ add.debt }}
			</view>
		</view>

		<!-- 商品选择 -->

		<view class="good-box">
			<view class="tit f30 c333" @click="goClient">
				商品选择 :				
				<view class="number"><!-- (0种，共0个) --></view>
				<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
			</view>
			<view class="kai" v-show="shop" v-for="(item, index) in shopMall" :key="item.title">
				<view class="bad">
					<image :src="item.cover" mode=""></image>
					<view class="box">
						<view class="">{{ item.title }}(商品名称）</view>
						<view class="">
							数量：{{ adf(item) }}（
							<text>¥{{ item.max_price }}</text>
							）
						</view>
					</view>
					<view class="bat" @click="showDian(index, item)">
						<view class="batone"><image src="../../static/stock/dian.png" mode=""></image></view>
						<view class="bad" v-if="item.Showdian">
							<view class="one" @click.stop="closeDian(index)">
								<image src="../../static/images/keng1.png" mode=""></image>
								<view class="">批量改价</view>
							</view>
							<view class="one" @click.stop="lastdian">
								<image src="../../static/images/keng2.png" mode=""></image>
								<view class="">使用上次价</view>
							</view>
							<view class="one" @click.stop="del(index)">
								<image src="../../static/images/keng3.png" mode=""></image>
								<view class="">删除</view>
							</view>
						</view>
						<view class="batTwo" @click.stop="showSum(index, item)">
							{{ item.show ? '关闭' : '展开' }}
							<image :src="image" mode=""></image>
							<!-- ../../static/images/arrow_down.png -->
							<!-- ../../static/images/arrow_ondown.png -->
						</view>
					</view>
				</view>
				<view class="sum" v-if="item.show">
					<view class="sumTop">
						<view class="sumTopOne">规格(库存）</view>
						<view class="sumTopOne">价格</view>
						<view class="sumTopOne">数量</view>
					</view>
					<view class="sumCenter" v-for="(child, childindex) in item.product_list" :key="childindex">
						<view class="sumTopOne">{{ child.spec_data[0] }}({{ child.spec_data[1] }}）</view>
						<view class="sumTopOnex" @click="changesell_price(index, childindex)">
							¥{{ parseFloat(child.discount_price || child.sell_price).toFixed(2) }}
							<image src="../../static/spe/01.png" mode=""></image>
						</view>
						<view class="sumTopOney">
							<stepper style="float: right;" size="small" :childindex="childindex" :index="index" :min="0" :max="20" @change="changeNum"></stepper>
						</view>
					</view>
					<view class="last" v-show="last">上次：20.00</view>
					<!-- 	<view class="sumBu">
						备：
						<image src="../../static/spe/01.png" mode="" @click="beizhu"></image>
					</view> -->
				</view>
			</view>

			<view class="imgBox">
				<image src="../../static/images/icon_search.png" mode="aspectFit"  @click="goClient"></image>
				<image src="../../static/images/icon_code.png" mode="aspectFit"></image>
				<image src="../../static/images/icon_scan.png" mode="aspectFit"></image>
			</view>
		</view>

		<view class="tbList">
			<view class="libox" @click="goOredr">
				<view class="name f30 c333">整单优惠</view>
				<text class="f26 tRight" style="color: red;">{{ zhekou }}</text>
				<view class="text f30"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
			</view>
			<!-- <view class="libox">
				<view class="name f30 c333">合计金额</view>
				<view class="text f30">0</view>
			</view> -->
			<view class="libox">
				<view class="name f30 c333">商品总金额</view>
				<view class="text f30">{{ ade }}</view>
			</view>
			<view class="libox">
				<view class="name f30 c333">应收金额</view>
				<view class="text f30">{{ adty }}</view>
			</view>
		
		</view>

		<view class="switchBox">
			<view class="switch-item">
				<view class="left"><view class="name f30 c333">现场付款</view></view>
				<view class="right"><switch color="#259AF6" @change="switchSales" /></view>
			</view>
			<view class="switch-item">
				<view class="left"><view class="name f30 c333">采购直接入库</view></view>
				<view class="right"><switch color="#259AF6" @change="switchStore" /></view>
			</view>
		</view>

		<view class="noteBox">
			<view class="name f30 c333">备注</view>
			<textarea placeholder-style="color:#666" placeholder="某某备注" v-model="bei" />
		</view>

		<!-- 	<view class="annexBox">
			<view class="name f30 c333">附件</view>
			<view class="upload f30">添加图片</view>
		</view>
 -->
		<view style="height: 110upx;"></view>
		<view class="submitBox">
			<view class="left">
				<view class="number f28 c666">共{{ huopin }}种货品（总数量：{{ allNum }}）</view>
				<view class="money f30">订单金额：{{ adty }}</view>
			</view>
			<view class="right" @click="allcommit"><view class="btn f30 cfff">提交订单</view></view>
		</view>
		<view class="meng" v-if="meng"></view>

		<uni-popup ref="popup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请输入规格名称</view>
					<view class="input-box"><input type="text" placeholder="最多输入12个字符" v-model="moneysize" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="close">取消</view>
						<view class="submit" @click="open">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			fatherIndex: '',
			moneysize: '',
			shop: false,
			add: {},
			image: '../../static/images/arrow_down.png',
			date: currentDate,
			sum: false,
			msg: '展开',
			meng: false,
			bad: false,
			last: false,
			is_hidden_sales: 0,
			is_hidden_store: 0,
			eindex: '',
			showadress: '',
			shopMall: [],
			goods_num: '',
			max_price: '',
			product_list: [],
			sizeIndex: '',
			piliang: '',
			// moreand:'',
			faindex: '',
			chiindex: '',
			xiugai: '',
			zhekou: '',
			zhed: '',
			bei: '',
			huopin: '',
			allmoney: '',
			allPriceTwo: '',
			ade: 0,
			adty: 0
		};
	},
	components: {
		uniPopup
	},

	onShow() {
		if (uni.getStorageSync('zhe') == '') {
			this.zhekou = '无折扣';
			this.zhed = 100;
		} else {
			this.zhekou = uni.getStorageSync('zhe') + '折';
			this.zhed = uni.getStorageSync('zhe');
		}
		if (+uni.getStorageSync('zhe') == 0) {
			this.zhekou = '无折扣';
			this.zhed = 100;
		}
		if (uni.getStorageSync('zhe') == '00') {
			this.zhekou = '无折扣';
			this.zhed = 100;
		}

		this.shopMall = uni.getStorageSync('storage_key');
		// console.log(this.shopMall);

		let object = {};
		let objres = this.shopMall.reduce((item, next) => {
			// console.log('item is ', item);
			object[next.goods_id] ? '' : (object[next.goods_id] = true && item.push(next));
			return item;
		}, []);
		this.shopMall = objres;

		if (this.shopMall.length == 0) {
		} else {
			this.shop = true;

			// this.shopMall = uni.getStorageSync('storage_key')
			this.shopMall.forEach(item => {
				item.show = false;
			});
			this.shopMall.forEach(item => {
				item.Showdian = false;
			});
			// console.log(this.shopMall);
			this.goods_num = this.shopMall.goods_num;
			this.max_price = this.shopMall.max_price;
			this.product_list = this.shopMall.product_list;
		}
		// console.log(this.shopMall);
		this.huopin = this.shopMall.length;

		this.shopMall.forEach(item => {
			item.product_list.forEach(item => {
				item.operate_num = 0;
			});
		});
	},
	onLoad(e) {
		this.add = JSON.parse(e.item);
		console.log(this.add);
		
	},
	computed: {
		allNum() {
			if (this.shopMall.length == '') {
				return;
			}
			let allnum = 0;
			this.shopMall.map(item => {
				item.product_list.map(itemTwo => {
					allnum += +itemTwo.store_num;
				});
			});
			return allnum;
		},
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},

	methods: {
		adf(item) {
			let c = 0;
			item.product_list.forEach(item => {
				c = c + item.store_num;
			});
			return c;
		},
		open() {
			if (this.piliang == 55) {
				// console.log(123);
				this.shopMall[+this.xiugai].product_list.forEach(item => {
					item.sell_price = this.moneysize;
				});
				this.moneysize = '';
				this.piliang = '';
				this.$refs.popup.close();
				return;
			}
			this.shopMall[+this.faindex].product_list[+this.chiindex].sell_price = this.moneysize;
			this.$refs.popup.close();
		},
		close() {
			this.$refs.popup.close();
		},
		changeNum(e) {
			// console.log(e);
			this.shopMall.forEach((item, i) => {
				if (item.show == true) {
					// console.log(i);
					this.fatherIndex = i;
				}
			});
			this.shopMall[+this.fatherIndex].product_list[+e.childindex].operate_num = +e.num;
			let c = 0;
			this.shopMall.map(item => {
				item.product_list.forEach(item => {
					c = +item.operate_num * +item.sell_price + c;
				});
			});
			this.ade = c;
			// console.log(c);
			// console.log(this.zhekou);
			this.adty = (+this.ade * +this.zhed) / 100;
			// console.log(this.zhed);
			this.shopMall[+this.fatherIndex].product_list[e.childindex].discount_price = (this.shopMall[+this.fatherIndex].product_list[e.childindex].sell_price * this.zhed) / 100;
		},
		dateChange(e) {
			this.date = e.target.value;
		},

		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		showSum(index, item) {
			// console.log(index);
			// console.log(item);

			if (item.show == true) {
				this.image = '../../static/images/arrow_down.png';
			} else {
				this.image = '../../static/images/arrow_ondown.png';
			}
			this.shopMall[index].show = !this.shopMall[index].show;
			this.$set(this.shopMall, index, this.shopMall[index]);
		},
		showDian(index, item) {
			// console.log(index);
			this.shopMall[index].Showdian = !this.shopMall[index].Showdian;
			this.$set(this.shopMall, index, this.shopMall[index]);

			this.meng = item.Showdian;
		},
		closeDian(e) {
			this.$refs.popup.open();
			this.meng = false;
			// console.log(e);
			this.xiugai = e;
			this.shopMall.forEach(item => {
				item.Showdian = false;
			});
			this.piliang = 55;
		},
		lastdian() {
			this.meng = false;
			this.bad = false;
			this.last = true;
		},
		switchSales(e) {
			if (e.target.value == true) {
				this.is_hidden_sales = 1;
			} else {
				this.is_hidden_sales = 0;
			}
			console.log(this.is_hidden_sales);
		},
		switchStore(e) {
			if (e.target.value == true) {
				this.is_hidden_store = 1;
			} else {
				this.is_hidden_store = 0;
			}
			console.log(this.is_hidden_store);
		},
		goclientPage() {
			uni.navigateBack({
				url: '../clientservice/clientPage'
			});
		},
		goChangeUser() {
			uni.navigateTo({
				url: './supplierManage' 
			});
			uni.setStorageSync('state',1)
		},
	
		goClient() {
			uni.navigateTo({
				url: '../shop/clientTwo'
			});
		},
		changesell_price(index, childindex) {
			this.$refs.popup.open();
			this.faindex = index;
			this.chiindex = childindex;
		},
		del(index) {
			this.shopMall.forEach(item => {
				return (item.Showdian = false);
			});
			this.$set(this.shopMall, index, this.shopMall[index]);

			this.shopMall.splice(index, 1);
			console.log(this.shopMall);
			this.meng = false;
		},
		goOredr() {
			uni.navigateTo({
				url: '../order/orderTwo'
			});
		},
		allcommit() {
		
			let b = [];
			this.shopMall.forEach(item => {
				item.product_list.forEach(child => {
					child.sell_price = child.discount_price;
					b.push(child);
				});
			});
			b.forEach(item => {
				delete item.spec_data;
				delete item.owe_num;
				delete item.trade_sum;
				delete item.sale_num;
				delete item.unit_id;
				delete item.unit_name;
				delete item.convert_num;
				delete item.store_num;
				delete item.discount_price;
			});
			b = b.filter(item => {
				return item.operate_num > 0;
			});
		
			this.$ajax('api/v1.supplier/addOrder', {
				merchandiser_id: 0,
				is_payment: this.is_hidden_sales,
				remark: this.bei,
				product_list: JSON.stringify(b),
				supplier_id:this.add.supplier_id,
				is_in_store:this.is_hidden_store,
				payable:this.adty,
				order_type:1
			})
				.then(res => {
					if(res.code==1){
						this.$sToast('提交成功')
						setTimeout(function(){
							// uni.navigateTo({
							// 	url:'./supplierManage'
							// })
							// procurement
							uni.navigateTo({
								url:'procurement'
							})
							
						},2000)
					}
				   
				})
				.catch(res => {
					console.log(Error);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #ffffff;
}

.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #fff;
	top: 0;
	z-index: 999;
}

.fiexd-top {
	width: 100%;
	position: fixed;
	z-index: 99999;
}
.header {
	width: 100%;
	background-color: #249af6;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 50upx 30upx 20upx 30upx;
	box-sizing: border-box;
	.arrow {
		image {
			width: 22upx;
			height: 40upx;
		}
	}
}
.order-info {
	background-color: $white-background;
	.order-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 30upx;
		border-bottom: 2upx #eeeeee solid;
		&:last-child {
			border-bottom: none;
		}
		.left {
			display: flex;
			flex-direction: row;
		}
		.arrow {
			image {
				width: 19upx;
				height: 34upx;
			}
		}
	}
}
.oweBox {
	background-color: $white-background;
	margin-bottom: 20upx;
	padding: 0 45upx 35upx 0;
	.text {
		color: #f64444;
		image {
			width: 35upx;
			height: 35upx;
			vertical-align: middle;
			margin-right: 10upx;
		}
	}
}
// 商品选择
.good-box {
	background-color: $white-background;
	padding: 40upx 0;
	.tit {
		padding: 0 30upx 35upx 30upx;
		display: flex;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.arrow {
			image {
				width: 19upx;
				height: 34upx;
			}
		}
		.number {
			font-size: 30upx;
			color: #249af6;
			margin-left: 10upx;
		}
	}
	.bad {
		position: relative;
		height: 211rpx;
		background-color: #ffffff;
		border-bottom: 2rpx solid #eeeeee;
		display: flex;

		image {
			width: 130rpx;
			height: 130rpx;
			margin: 35rpx 41rpx;
		}
		.box {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 48px;
			text {
				color: #f64444;
			}
		}

		.bat {
			position: relative;
			position: absolute;
			right: 0;

			.bad {
				position: absolute;
				height: 176rpx;
				width: 482rpx;
				left: -400rpx;
				box-sizing: border-box;
				top: 52rpx;
				background-color: #ffffff;
				z-index: 3;
				display: flex;
				justify-content: space-evenly;
				text-align: center;
				font-size: 30rpx;
				.one {
					image {
						width: 38rpx;
						height: 44rpx;
					}
				}
			}
			.batone {
				image {
					width: 28rpx;
					height: 10rpx;
				}
			}
			.batTwo {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(36, 154, 246, 1);
				margin-top: 40rpx;
				image {
					margin: 0;
					margin-left: 10rpx;

					width: 17rpx;
					height: 10rpx;
					vertical-align: middle;
				}
			}
		}
	}
	.imgBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 40upx;
		image {
			width: 100%;
			height: 60upx;
		}
	}
}
.tbList {
	margin-top: 20upx;
	.libox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: $white-background;
		padding: 35upx 30upx;
		border-bottom: 2upx #eeeeee solid;
		&:first-child {
			margin-bottom: 20upx;
		}
		&:nth-child(2) {
			margin-bottom: 20upx;
		}
		&:nth-child(4) {
			margin-bottom: 20upx;
		}
		.text {
			color: #333;
			display: flex;
			flex-direction: row;
			align-items: center;
			image {
				width: 18upx;
				height: 33upx;
				margin-left: 30upx;
			}
		}
	}
}
.noteBox {
	background-color: $white-background;
	padding: 40upx 30upx;
	margin-top: 20upx;
	position: relative;
	.name {
		position: absolute;
		left: 30upx;
	}
	textarea {
		width: 100%;
		height: 120upx;
		padding-left: 185upx;
		box-sizing: border-box;
		font-size: 30upx;
		color: #666;
	}
}

.annexBox {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: $white-background;
	padding: 40upx 30upx;
	margin: 20upx 0 60upx 0;
	.upload {
		color: #249af6;
	}
}
.submitBox {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	background-color: $white-background;
	height: 110upx;
	border-top: 2upx #eee solid;
	.left {
		padding: 20upx 0 0 30upx;
		.money {
			color: #f64444;
		}
	}
	.right {
		width: 260upx;
		background-color: #249af6;
		text-align: center;
		line-height: 110upx;
	}
}
// 开关选择器
.switchBox {
	margin-top: 20upx;
	.switch-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: $white-background;
		padding: 30upx 20upx 30upx 30upx;
		border-bottom: 1upx #eeeeee solid;
		padding-bottom: 20upx;
		.left {
			.name {
				padding-top: 14upx;
			}
		}
		.right {
			switch {
				transform: scale(0.7);
			}
		}
	}
}
.sum {
	width: 100%;
	background: rgba(238, 238, 238, 1);
	.sumTop {
		border-bottom: 2rpx solid #cccccc;
		height: 100rpx;
		font-size: 32rpx;
		line-height: 100rpx;
		padding-left: 36rpx;
		padding-right: 89rpx;
		display: flex;
		justify-content: space-between;
	}
	.last {
		width: 137rpx;
		height: 45rpx;
		border-radius: 5rpx;
		border: 2px solid rgba(153, 153, 153, 1);
		text-align: center;
		line-height: 50rpx;
		margin: 0 auto;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		margin-top: 30rpx;
	}
	.sumCenter {
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 80rpx;
		border-bottom: 2rpx solid #cccccc;
		.sumTopOnex {
			position: relative;
			left: 44rpx;
		}
		box-sizing: border-box;
		margin-top: 22rpx;

		display: flex;
		font-size: 32rpx;
		justify-content: space-between;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		image {
			width: 37rpx;
			height: 34rpx;
		}
		.sumTopOney {
			margin-top: 30rpx;
		}
	}
	.sumBu {
		margin-left: 36rpx;
		height: 99rpx;
		line-height: 99rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 48px;
		image {
			width: 37rpx;
			height: 34rpx;
			vertical-align: middle;
		}
	}
}
.meng {
	top: 0;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: black;
	opacity: 0.2;
}
</style>
